/*
 * @Author: 张升 1562821455@qq.com
 * @Date: 2023-07-18 15:13:44
 * @LastEditors: zhangsheng zhangsheng@zhixueyun.com
 * @LastEditTime: 2024-11-13 02:04:17
 * @FilePath: \react-demo\src\views\testcss\components\importcss.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, {Component} from "react";
import { Steps } from 'antd';
import "./importcss.css"

import { withTranslation } from 'react-i18next'; // 类组件无法使用useTranslation这个hook,引入withTranslation高阶组件,用于在类组件中使用i18n

const description = '这里是描述信息';

class ImportCss extends Component {
  state={
    flag:true
  }
  changeColor=()=>{
    this.setState((state,props)=>{
      return{
        flag:!state.flag
      }
    })
  }
  render() {
    const {t}=this.props
    const {flag}=this.state
    return (
      <div>
        <Steps current={1} items={[{title: t('first_step'), description}, {title: t('second_step'), description, subTitle: '副标题'}, {title: t('third_step'), description}]}></Steps>
        <h1 className={flag?'blueColor':'redColor'}>测试样式引入</h1>
        <div onClick={this.changeColor} className="btnStyle">点击更改字体颜色</div>
      </div>
    )
  }
}
export default withTranslation()(ImportCss);